<template>
  <view class="page">
    <view class="content">
      <view class="content-title">{{
        type == 1 ? "请设置6位支付密码" : "请输入6位新密码"
      }}</view>
      <view class="content-title1">不能是重复或连续的数字</view>
    </view>
    <view class="container">
      <u-code-input
        v-model="password"
        mode="box"
        dot
        @finish="codeInputFinish"
      ></u-code-input>
    </view>

    <template v-if="type == 2">
      <view class="content">
        <view class="content-title">请输入验证码</view>
      </view>
      <view class="container">
        <u-code-input
          v-model="authCode"
          :maxlength="4"
          @finish="codeInputFinish"
        ></u-code-input>
      </view>
      <view class="content">
        <u-code ref="uCode" @change="codeChange"></u-code>
        <u-button @click="getCode">{{ tips }}</u-button>
      </view>
    </template>

    <view class="bottom">
      <view class="btn" @click="cancel">取消</view>
      <view class="btn1" @click="confirm">确定</view>
    </view>
  </view>
</template>

<script>
import userApi from "@/api/user";
export default {
  name: "administrator",
  components: {},
  data() {
    return {
      userInfo: {},
      type: 1, // 1-设置 2-修改
      password: "",
      authCode: "", // 验证码
      tips: "",
    };
  },
  onLoad(options) {},
  onShow() {
    this.type = uni.getStorageSync("userInfo").payPassword;
  },
  methods: {
    codeInputFinish() {
      // console.log("输入完毕");
      uni.hideKeyboard();
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      // 获取验证码
      // console.log("canGetCode---", this.$refs.uCode.canGetCode);
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: "正在获取验证码",
        });
        userApi.getNoteCode().then((res) => {
          // console.log("res---", res);
          if (res.code == 200) {
            uni.hideLoading();
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }
        });
      } else {
        uni.showToast({
          title: "倒计时结束后再发送",
          icon: "none",
        });
      }
    },
    toOpen() {
      this.$refs.jpKeyboard.toOpen();
    },
    cancel() {},
    confirm() {
      // 修改支付密码
      if (this.type == 2) {
        if (this.authCode == "") {
          uni.showToast({
            title: "请输入验证码",
            icon: "none",
          });
          return;
        }
        let data = {
          code: this.authCode,
          newPayPassword: this.password,
        };
        userApi.updatePayPassword(data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              icon: "none",
              title: "支付密码修改成功！",
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        });
      }
      // 设置支付密码
      if (this.type == 1) {
        let data = {
          payCode: this.password,
        };
        userApi.setPassword(data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "支付密码设置成功！",
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        });
      }

      // if (this.hasRepeatedOrConsecutiveDigits(this.password)) {
      //   uni.showToast({
      //     title: "密码包含重复或连续的数字!",
      //     icon: "none",
      //     duration: 2000,
      //   });
      // } else {
      //   console.log("密码符合要求");
      // }
    },
    // hasRepeatedOrConsecutiveDigits(password) {
    //   // 将字符串转换为数组，以便检查每个字符
    //   const digits = password.split("");
    //   // 检查是否有重复的数字
    //   for (let i = 0; i < digits.length - 1; i++) {
    //     if (digits[i] === digits[i + 1]) {
    //       return true; // 发现重复的数字
    //     }
    //   }

    //   // 检查是否有连续的数字
    //   for (let i = 0; i < digits.length - 1; i++) {
    //     const currentDigit = parseInt(digits[i], 10);
    //     const nextDigit = parseInt(digits[i + 1], 10);

    //     if (nextDigit === currentDigit + 1) {
    //       return true; // 发现连续的数字
    //     }
    //   }

    //   return false; // 没有发现重复或连续的数字
    // },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #fff;
  width: 100vw;
  height: 100vh;
}

.content {
  padding: 56rpx 40rpx;

  .content-title {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 44rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .content-title1 {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 20rpx;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 160rpx;
  border-top: 1rpx solid #0000001a;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn {
    width: 311rpx;
    height: 100rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    border: 2.5rpx solid #121212;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn1 {
    width: 311rpx;
    height: 100rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20rpx;
    color: #ffffff;
    font-family: "PingFang SC";
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
  }
}

.container {
  display: flex;
  justify-content: space-around;
  // padding: 0 20px;
}

.input-group {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-group input {
  width: 88rpx;
  height: 112rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
  background: #f5f5f5;
  text-align: center;
}

.error-message {
  color: red;
  margin-left: 20px;
}

/deep/ .u-code-input__item {
  width: 88rpx !important;
  height: 112rpx !important;
  flex-shrink: 0;
  border-radius: 12rpx;
  background: #f5f5f5;
  border: none !important;
}
</style>
